<template>

  <div>
    <div class="home">
      <div class="header">
        <mt-navbar class="home-title">

          <div class="logo">
            <img src="../../static/home/logo.png" width="30px" height="30px" />
          </div>
          <p class="njsw">享读书</p>
          <div class="home-top">
            <router-link class='too' to='/search'>
              <img src="../../static/home/search.png" alt="搜索" width="28px" height="28px" />
            </router-link>
            <router-link class='too' to='/hot'>
              <span>排行</span>
            </router-link>
          </div>
        </mt-navbar>
        <mt-navbar class="home-nav" v-model='active'>
          <div v-for="(item,index) in Navbarlist" :key="index">
            <mt-tab-item class='nav-title' :id='item.columnId' v-text="item.columnName" @click="gethomePage(item)"></mt-tab-item>
          </div>
        </mt-navbar>
      </div>
      <div class="main">
        <div class="banner">
          <swiper></swiper>
        </div>
        <mt-tab-container v-model="active">
          <mt-tab-container-item :id='active'>
            <keep-alive>
              <component :is="currentTab" :navid="navid"></component>
            </keep-alive>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "./subcom/tabbar.vue";
import recommend from "./swipecontent/recommend/recommend.vue";
import books from "./swipecontent/books/books.vue";
import periodical from "./swipecontent/periodical/periodical.vue";
import newspaper from "./swipecontent/newspaper/newspaper.vue";
import videos from "./swipecontent/video/videos.vue";
import read from "./swipecontent/read/read.vue";
import swiper from "@/components/subcom/swiper";
import api from "./../api/api.js";
import { Indicator } from "mint-ui";

export default {
  components: {
    tabbar,
    recommend,
    books,
    periodical,
    newspaper,
    videos,
    read,
    swiper
  },
  name: "home",
  data() {
    return {
      active: 0,
      selected: "home",
      Navbarlist: [], //轮播图
      currentTab: "",
      navid: ""
    };
  },
  watch: {
    active: function(nVal, oVal) {
      for (let item of this.Navbarlist) {
        if (item.columnId == nVal) {
          this.gethomePage(item);
          localStorage.setItem("swipeableId", nVal);
          // return;
        }
      }
      console.log("nVal:"+nVal)
    }
  },
  mounted() {
  },
  created() {
    this.datevalue = this.formatDate(new Date().getTime()); //时间年月日时分秒
    this.prePushTime = this.datevalue.substring(0, 11); //取年月日
    //this.newtime = this.datevalue.substring(11,16);    //取时分
    this.getNavbar();
    // this.getBanner();
  },
  methods: {
    //获取Page组件
    gethomePage(item) {
      if (item.resType == 0) {
        //推荐
        this.currentTab = recommend;
        this.active = item.columnId;
        localStorage.swipeableId = item.columnId;
      } else if (item.resType == 1) {
        //图书
        this.active = item.columnId;
        this.currentTab = books;
        this.navid = item.columnId;
        localStorage.swipeableId = item.columnId;
      } else if (item.resType == 2) {
        //文章
        this.currentTab = read;
        this.navid = item.columnId;
        this.active = item.columnId;
        localStorage.swipeableId = item.columnId;
      } else if (item.resType == 3) {
        //视频
        this.currentTab = videos;
        this.navid = item.columnId;
        this.active = item.columnId;
        localStorage.swipeableId = item.columnId;
      } else if (item.resType == 4) {
        //报纸
        this.currentTab = newspaper;
        this.active = item.columnId;
        localStorage.swipeableId = item.columnId;
      } else if (item.resType == 5) {
        //期刊
        this.active = item.columnId;
        this.currentTab = periodical;
        localStorage.swipeableId = item.columnId;
      }
    },
    //首页一级栏目
    getNavbar() {
      const userid = localStorage.getItem("userid")
      this.$http({
        method: "post",
        url: api.baseURL + "getFirstLevelColumnList",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            userId: userid,
            terminalType: 1
          }
        }
      })
        .then(response => {
          let listdata = response.data.data;
          let recommend = {
            columnId: 0,
            columnName: "推荐",
            hasChild:0,
            resType: 0
          };
          listdata.unshift(recommend);
          this.Navbarlist = listdata;
          console.log(this.Navbarlist)
          if (window.localStorage.getItem("swipeableId")) {
            const localData = localStorage.getItem("swipeableId");
            for (let item of this.Navbarlist) {
              if(item.columnName =='图书'){
                sessionStorage.setItem("bookFirstId",item.columnId)
              }
              if (item.columnId == localData) {
                this.gethomePage(item);
                this.active = localData;
                return;
              }
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
/*tab-swper选中滑动颜色*/

.home .mint-navbar .mint-tab-item.is-selected {
  border-bottom: 0.5px solid #e60012;
  color: #e60012;
}

.home .mint-navbar .mint-tab-item {
  margin-bottom: 1px;
}

.home .header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 888;
}

.home .main {
  height: 100%;
  box-sizing: border-box;
  margin-top: 90px;
  margin-bottom: 65px;
}

.home .home-title {
  height: 40px;
  background: #e60012;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home .home-title .logo {
  width: 10%;
  height: 4vh;
  /*background: sandybrown;*/
}

.home .home-title .logo img {
  margin-left: 1vw;
  margin: 0 auto;
  display: block;
}

.home .home-title p {
  font: 16px/16px "microsoft yahei";
  color: #ffffff;
  margin-left: 55px;
  flex: 1;
  text-align: center;
  /*background: sandybrown;*/
}

.home .home-title .home-top {
  color: #ffffff;
  /*background: peachpuff;*/
}

.home .home-title .home-top {
  display: flex;
  justify-content: center;
  align-items: center;
}
.home .home-title .home-top img {
 height: 25px;
 width: 25px;
}

.home .home-title .home-top span {
  margin-right: 5px;
}

.home .home-top .too {
  height: 22px;
  margin: 0 5px;
  line-height: 22px;
  /*background: fuchsia;*/
  text-decoration: none;
  color: #ffffff;
}
/*top-nav 样式 */

.home .home-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1920px;
  padding:0 40px;
  overflow-x: auto;
}

.home .home-nav .nav-title {
  text-decoration: none;
  white-space: nowrap;
  margin: 0 15px;
}
/*footer tab hight*/

.footer .mint-tab-item {
  padding: 3px 0;
}

.mint-tab-item-icon > img {
  font-size: 50px;
}

.mint-tabbar {
  position: fixed;
  /*bottom: 0;*/
  background-color: #ffffff;
}
</style>